﻿@using PlatformNetCore.Entity
@{
    ViewBag.Title = "新增";
}
@model Images
<style>
    html {
        background-color: #fff;
    }

    .layui-card {
        box-shadow: none;
    }
</style>

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="@Url.Action("ImagesAdd","Images",new { area = "Admin"})" lay-filter="useradd-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题*</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" lay-verify="required" placeholder="标题" autocomplete="on" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属类型*</label>
                <div class="layui-input-block">
                    <select name="ImagesType" lay-filter="ImagesType">
                        @foreach (var item in (IEnumerable<SelectListItem>)ViewBag.ImagesTypeDLL)
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="previewImage">
                <label class="layui-form-label">封面图</label>
                <div class="layui-input-block">
                    <input type="hidden" id="CoverImage" name="CoverImage" autocomplete="on" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-danger" id="transfer-upload">
                        <i class="layui-icon"></i>上传图片
                    </button>
                    <img id="transferImg" style="height:40px;display:none;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea type="text" class="layui-textarea" name="Remark" maxlength="500" placeholder="摘要"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="text" name="SortNo" value="1000" placeholder="排序号" autocomplete="on" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked="" name="IsAvailable" value="1" lay-skin="switch" lay-filter="available-Switch" lay-text="显示|隐藏">
                </div>
            </div>
            <div id="useradd-submit" lay-submit lay-filter="useradd-submit"></div>
        </form>
    </div>
</div>
<script>
    var viewer = new Viewer(document.getElementById('previewImage'), {
        url: 'src',
        navbar: false
    });

    layui.use(['laydate','form','upload'], function () {
        var $ = layui.$, form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;

        form.render(null, 'useradd-form');

        /* 监听指定开关 */
        form.on('switch(available-Switch)', function (data) {
            $(this).val(this.checked ? '1' : '0')
        });

        var iframeId = $(window.frameElement).attr("id");
        //设定文件大小限制
        var loadingFlag;
        upload.render({
            elem: '#transfer-upload'
            , url: '/Admin/File/Upload'
            , size: 10240 //限制文件大小 5M，单位 KB
            , data: { UploadFileType: "@(PlatformNetCore.Entity.UploadFileType.CoverImage.ToString())" }
            , before: function (obj) {
                $(parent.document).find("#"+iframeId).parent().nextAll("div").find("a[class='layui-layer-btn0']").attr("disabled",true).css("pointer-events","none");
                loadingFlag = layer.msg('正在加载，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 10000 });
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#transferImg').attr('style', 'height:40px;cursor:pointer;');
                    $('#transferImg').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                layer.close(loadingFlag);
                $(parent.document).find("#"+iframeId).parent().nextAll("div").find("a[class='layui-layer-btn0']").removeAttr("disabled").removeAttr("style");
                if (res.success) {
                    $("#CoverImage").val(res.data);
                }
                else {
                    layer.msg('上传失败，请重试', { icon: 2, time: 1500 });
                }
            }
            ,error: function() {
                layer.msg('上传失败，请重试', { icon: 2, time: 1500 });
            }
        });
    });
</script>
